 <template>
  <div class="content">
    <div class="cloud-header">
      <h2 class="r-title-h2">分类管理</h2>
    </div>
    <div class="cloud-body">
      <div class="r-table">
        <div class="r-table-head">
          <div class="r-table-title"><i class="iconfont icon-menu1"></i>分类管理</div>
          <div class="r-table-button">
            <button class="h-btn h-btn-text-primary" @click="addClass"><i class="iconfont icon-add"></i>新增分类</button>
          </div>
        </div>
        <Table :datas="datas" class="r-table-main" :checkbox="checkbox" :stripe="stripe" :loading="loading" selectWhenClickTr>
          <TableItem title="" prop="$serial" v-if="serial"></TableItem>
          <TableItem title="分类名称" prop="name"></TableItem>
          <TableItem title="分类描述" prop="abstract"></TableItem>
          <TableItem title="操作" align="center" :width="160">
            <template slot-scope="{data}">
              <div class="r-item-action">
                <div @click="intEdit(datas, data)" class="r-action-button">编辑</div>
                <div @click="intDel(datas, data)" class="r-action-button">删除</div>
              </div>
            </template>
          </TableItem>
          <div slot="empty">没有添加商品分类</div>
        </Table>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import editModel from '@/components/category_model.vue'
import time from '@/utils/datetime'
export default {

  name: "",
  data() {
    return {
      _uniqueid:"",
      datatable_name:'goods_classify',          //数据库表名


      // 表格
      show: false,
      border: false,
      stripe: false,
      checkbox: false,
      serial: false,
      loading: true,
      datas: [
        // { id: 5,  name: '购买10元优惠券',  abstract:'描述描述描述'},
      ],

      id:1,
    }
  },
  components: {
    
  },
  mounted(){
    this._uniqueid = this.$cloud.userInfo()._uniqueid
    // 获取商品分类
    this.getClass();
  },
  methods: {
    /**
     * 获取商品分类列表
     * @return {[type]} [description]
     */
    async getClass(){
      this.loading = true;
      let ret = await this.$cloud.name(this.datatable_name).where({_uniqueid:this._uniqueid}).select();
      if(ret){
        this.datas = ret;
        this.loading = false;
      }else{
        this.loading = true;
        this.$Message.error('网络异常，请稍后重试！')
      }
    },



    /**
     * 新增分类
     */
    async addClass(){
      let data = {
        name:'',              //分类名称
        creation_time:'',     //创建时间
        abstract:''           //分类介绍
      } 

      this.$Modal({
        width:500,
        component: {
          vue: editModel,
          data: {id:''},
          datas: { fruit: data } // 子组件直接使用 props 即可使用，兼容性 1.15.0+
        },
        events: {
          success:async (modal, data) => {
            // 添加创建时间
            data['creation_time'] = time.getDate()
            let ret = await this.$cloud.name(this.datatable_name).insert(data);
            if(ret){
              this.$Message.success('创建分类成功！')
            }else{
              this.$Message.error('网络异常，请刷新后重试！')
            }
            this.getClass();
          }
        }
      });
    },

    intSubmit(){
      console.log('打印试试看')
    },


    /**
     * 编辑分类
     * @param  {[type]} datas [description]
     * @param  {[type]} data  [description]
     * @return {[type]}       [description]
     */
    intEdit(datas, data) {
      let value = JSON.parse(JSON.stringify(data))
      console.log('编辑',data);
      this.$Modal({
        width:550,
        component: {
          vue: editModel,
          data: {id: data._id},
          datas: { fruit: value } // 子组件直接使用 props 即可使用，兼容性 1.15.0+
        },
        events: {
          success:async (modal, data) => {
            let ret = await this.$cloud.name(this.datatable_name).where({_id:data._id}).update(data);
            // if(ret){
            //   this.datas.forEach((item,index) =>{
            //     if(item._id == data._id){
            //       this.datas.splice(index,1,data)
            //     }
            //   })
            //   this.$Message.success('更新分类成功！');
            // }else{
            //   this.$Message.error('网络异常，请刷新后重试！')
            // }
            console.log('vue',this.datas);
            this.getClass();
          },
          delete: (model, data) => {
           this.intDel(this.datas,data);
          }
        }
      });
    },

    intDel(datas, data){
        this.$Confirm('您确定删除商品分类吗？删除之后将无法恢复，永久删除！','删除商品分类').then(async () => {
          let ret = await this.$cloud.name(this.datatable_name).where({_id:data._id}).delete();
          if(ret){
            this.$Message.success('删除成功！');
            // 重新拉取列表
            this.getClass();
          }else{
            this.$Message.error('网络异常，请刷新后重试！')
          }
        }).catch(() => {
          this.$Message.error('取消操作');
        });
    }
  }
}

</script>
<style type="text/css" lang="less">
.cloud-header {
  margin-bottom: 20px;
}

.r-title-h2 {
  border-left: solid 5px #2d7bf4;
  padding-left: 10px;
  margin-bottom: 0px !important;
}

.r-table {
  .r-table-head {
    border-bottom: solid 1px #efefef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;

    .r-table-title {
      color: #999;

      i {
        margin-right: 10px;
      }
    }

    .r-table-button {
      button {
        margin-left: 15px;
      }

      i {
        margin-right: 5px;
      }
    }
  }

  .r-table-main {
    border: none;

    th {
      background-color: #fff;
    }
  }

  .r-item-action {
    display: flex;
    align-items: center;
    justify-content: center;

    .r-action-button {
      margin: 0px 5px;
      color: #3788ee;
      cursor: pointer;
    }

    .r-action-button:active {
      color: #2677dd;
    }
  }
}
.r-category-model .h-notify-container{
  width: 500px;
}

/* 暂用办法。解决全局样式污染问题 */
.h-modal-comfirm .h-notify-container{
 width:560px !important;
}

</style>
